<template>
  <div class="extract-intel">
    <el-row :gutter="24" class="main-row">
      <!-- 左侧文本内容区 -->
      <el-col :span="8" class="left-panel">
        <el-card class="text-card">
          <template #header>
            <div class="header">
              <h2>文本内容</h2>
              <el-tooltip content="在右侧查看从文本中抽取的实体和关系">
                <el-icon><el-icon-question-filled /></el-icon>
              </el-tooltip>
            </div>
          </template>
          <div class="content">
            <el-form label-position="top">
              <el-form-item>
                <el-input
                  v-model="textContent"
                  type="textarea"
                  :rows="15"
                  placeholder="请输入要分析的文本内容..."
                  resize="none"
                />
              </el-form-item>
              
              <el-form-item>
                <el-button 
                  type="primary" 
                  @click="processText" 
                  :loading="processing"
                  style="width: 100%"
                  :icon="ElIconSearch"
                >
                  处理文本
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
      
      <!-- 右侧结果区 -->
      <el-col :span="16" class="right-panel">
        <el-card class="result-card">
          <template #header>
            <div class="header">
              <h2>抽取结果数据</h2>
            </div>
          </template>
          <el-scrollbar class="json-scrollbar">
            <div v-if="rawResponse" class="json-content-wrapper">
              <vue-json-pretty
                :data="rawResponse"
                :deep="3"
                :show-line="true"
                :show-double-quotes="jsonPrettyConfig.showDoubleQuotes"
                :show-length="jsonPrettyConfig.showLength"
                :highlight-mouseover-node="jsonPrettyConfig.highlightMouseoverNode"
                :collapsed-node-line-num="3"
                class="json-viewer"
                :style-config="vscodeTheme"
              />
            </div>
            <div v-else class="no-data">
              暂无数据，请先处理文本
            </div>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  QuestionFilled as ElIconQuestionFilled,
  Connection as ElIconConnection,
  Search as ElIconSearch
} from '@element-plus/icons-vue'
// 引入 vue-json-pretty
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'

const router = useRouter()
const processing = ref(false)
const textContent = ref(`"Symantec products guard against exploitation of vulnerabilities that are being actively exploited by cyber-crime actors. Extortion actors have been actively exploiting a recently patched vulnerability in MOVEit Transfer, a file-transfer application that is widely used to transmit information between organizations. The nature of the software affected means that attackers can exploit unpatched systems to mount a supply chain attack against multiple organizations. While the original vulnerability ( CVE-2023-34362 ) was patched on May 31, MOVEit Transfer\u2019s developers announced on Friday (June 9) that multiple additional vulnerabilities (CVEs pending) have also been identified and patched. Prior to its patching, attackers linked to the Clop ransomware operation were already exploiting CVE-2023-34362 as a zero-day vulnerability."`) // 默认文本
const rawResponse = ref(null)

// mock数据 - 保持数据结构不变
const mockData = 
  {
    "entity": [
      {"type": "attacker", "text": "Extortion actors"},
      {"type": "tool", "text": "MOVEit Transfer"},
      {"type": "vulnerablity", "text": "CVE-2023-34362"},
      {"type": "malware", "text": "Clop ransomware"},
    ],
    "relation": [
  
      {
        "type": "uses",
        "args": [
          {"type": "attacker", "text": "Extortion actors"},
          {"type": "tool", "text": "MOVEit Transfer"}
        ]
      },
      {
        "type": "exploits",
        "args": [
          {"type": "malware", "text": "Clop ransomware"},
          {"type": "vulnerablity", "text": "CVE-2023-34362"}
        ]
      },
    ]
  }


// JSON格式化相关配置
const jsonPrettyConfig = {
  showDoubleQuotes: true,
  showLength: false,
  highlightMouseoverNode: true
}

// 自定义 vscode 风格的主题
const vscodeTheme = {
  keyColor: '#9cdcfe',
  valueColor: '#ce9178',
  stringColor: '#ce9178',
  numberColor: '#b5cea8',
  booleanColor: '#569cd6'
}

// 初始加载时直接显示结果
onMounted(() => {
  rawResponse.value = mockData
})

// 处理文本并提取实体和关系
const processText = async () => {
  if (!textContent.value.trim()) {
    ElMessage.warning('请先输入文本内容')
    return
  }
  
  processing.value = true
  
  try {
    // 这里是模拟API调用，实际项目中应替换为真实的API调用
    // const response = await axios.post('/api/extract', { text: textContent.value })
    // rawResponse.value = response.data
    
    // 模拟处理延迟
    setTimeout(() => {
      rawResponse.value = mockData
      processing.value = false
      ElMessage.success('文本处理成功')
    }, 800)
  } catch (error) {
    console.error('处理文本失败:', error)
    ElMessage.error('处理文本失败，请稍后重试')
    processing.value = false
  }
}
</script>

<style scoped>
.extract-intel {
  width: 100%;
  min-height: 80vh;
  box-sizing: border-box;
  padding: 24px 0;
}
.main-row {
  height: 100%;
}
.left-panel {
  min-width: 320px;
}
.right-panel {
  min-width: 400px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.text-card, .result-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.text-card :deep(.el-card__header), 
.result-card :deep(.el-card__header) {
  background-color: #f5f7fa;
  padding: 12px 20px;
}
.text-card :deep(.el-textarea__inner) {
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.5;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.content {
  padding: 10px 0;
}
.json-scrollbar {
  flex: a;
  max-height: 60vh;
  min-height: 300px;
  background: #1e1e1e;
  border-radius: 8px;
  margin-top: 8px;
  padding: 0;
  overflow: auto;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.json-content-wrapper {
  width: 100%;
  padding: 16px;
}
/* 自定义 vue-json-pretty 样式 */
:deep(.vjs-tree) {
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #d4d4d4 !important;
}
:deep(.vjs-value) {
  color: inherit;
}
:deep(.vjs-value .vjs-value) {
  color: inherit;
}
:deep(.vjs-tree .vjs-indent) {
  padding-left: 24px !important;
}
:deep(.vjs-key) {
  color: #9cdcfe !important;
}
.no-data {
  padding: 16px;
  color: #999;
  font-style: italic;
}
@media (max-width: 900px) {
  .main-row {
    flex-direction: column;
  }
  .left-panel, .right-panel {
    min-width: 0;
    width: 100%;
  }
  .json-scrollbar {
    max-height: 40vh;
    min-height: 180px;
  }
}
</style> 